<template>
  <div class="app-container">
    <div class="cardBox">
      <el-form :inline="true" class="search-form" label-width="100px">
        <el-row style="display: flex">
          <div style="flex: 1">
            <el-form-item label="订单号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入订单号"
                v-model="searchForm.order_no"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="收货人姓名" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入收货人姓名"
                v-model="searchForm.recipient"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="收货人电话" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入收货人电话"
                v-model="searchForm.phone_number"
                type="number"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item> -->
            <el-form-item
              v-if="searchDisplay"
              label="商品名称"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品名称"
                v-model="searchForm.goods_name"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="订单状态" style="margin: 5px 0">
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="请选择订单状态"
              >
                <el-option
                  v-for="item in [
                    { name: '待付款', id: 1 },
                    { name: '待发货', id: 2 },
                    { name: '待收货', id: 3 },
                    { name: '退货、售后', id: 4 },
                    { name: '已收货', id: 5 },
                    { name: '已取消', id: 9 },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="用户ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入用户ID"
                v-model="searchForm.user_id"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="商品ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品ID"
                v-model="searchForm.goods_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="供货商ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入供货商ID"
                v-model="searchForm.supplier_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="店铺/商户ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入店铺/商户ID"
                v-model="searchForm.mer_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="下单起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="create_time"
                type="datetimerange"
                @change="create_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="支付起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="pay_time"
                type="datetimerange"
                @change="pay_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
              <el-button
                v-if="!searchDisplay"
                type="warning"
                icon="el-icon-caret-bottom"
                @click="searchDisplay = true"
                >展开</el-button
              >
              <el-button
                v-else
                type="warning"
                icon="el-icon-caret-top"
                @click="searchDisplay = false"
                >收起</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="grouping cardBox" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button
              v-hasPermi="'platformorder/aftersales'"
              @click="pathWay"
              icon="el-icon-tickets"
              type="primary"
              >售后订单</el-button
            >
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="getListWay"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            highlight-current-row
            :data="OrderList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="fruit == 'user_avatar' || fruit == 'goods_main_image'"
                  style="width: 40px; height: 40px; margin: 0 auto"
                >
                  <el-image
                    v-if="scope.row[fruit]"
                    :src="scope.row[fruit]"
                    :preview-src-list="[scope.row[fruit]]"
                  />
                </div>
                <div v-else-if="fruit == 'pay_service'">
                  <el-tag v-if="scope.row[fruit] == 1" size="mini"
                    >余额支付</el-tag
                  >
                  <el-tag v-if="scope.row[fruit] == 2" size="mini"
                    >支付宝</el-tag
                  >
                  <el-tag v-if="scope.row[fruit] == 3" size="mini">微信</el-tag>
                </div>
                <div v-else-if="fruit == 'addr_province_name'">
                  {{ scope.row.addr_province_name }}
                  {{ scope.row.addr_city_name }}
                  {{ scope.row.addr_district_name }}
                </div>
                <span v-else>
                  {{ scope.row[fruit] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="订单状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 1" type="warning"
                  >待支付</el-tag
                >
                <el-tag v-if="scope.row.status == 2" type="info">待发货</el-tag>
                <el-tag v-if="scope.row.status == 3" type="info">待收货</el-tag>
                <el-tag v-if="scope.row.status == 4" type="warning"
                  >售后</el-tag
                >
                <el-tag v-if="scope.row.status == 5" type="success"
                  >已收货</el-tag
                >
                <el-tag v-if="scope.row.status == 6" type="success"
                  >已完成</el-tag
                >
                <el-tag v-if="scope.row.status == 9" type="danger"
                  >已取消</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              width="200"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <!-- <el-popconfirm
                  title="确定要退款吗?"
                  @confirm="refundOrder(scope.row)"
                > -->
                <!-- slot="reference" -->
                <el-button
                  v-hasPermi="'platformorder/refund'"
                  v-if="scope.row.status == 2"
                  style="margin: 5px"
                  type="danger"
                  size="mini"
                  @click="refundOrder(scope.row)"
                >
                  退款
                </el-button>
                <!-- </el-popconfirm> -->

                <el-button
                  v-hasPermi="'platformorder/cancel_order'"
                  @click="cancellationOrder(scope.row)"
                  v-if="scope.row.status == 1"
                  style="margin: 5px"
                  type="danger"
                  size="mini"
                  slot="reference"
                >
                  取消订单
                </el-button>
                <el-button
                  v-if="scope.row.status == 1 || scope.row.status == 2"
                  style="margin: 5px"
                  type="warning"
                  size="mini"
                  @click="editNotesWay(scope.row)"
                >
                  查看备注
                </el-button>
                <el-button
                  v-hasPermi="'platformorder/modify_address'"
                  v-if="scope.row.status == 1 || scope.row.status == 2"
                  style="margin: 5px"
                  type="warning"
                  size="mini"
                  @click="drawerHandle(scope.row)"
                >
                  修改收货地址
                </el-button>
                <el-button
                  style="margin: 5px"
                  type="primary"
                  size="mini"
                  @click="detailsHandle(scope.row)"
                >
                  详情
                </el-button>
                <el-button
                  v-if="
                    scope.row.status == 3 ||
                    scope.row.status == 4 ||
                    scope.row.status == 5
                  "
                  style="margin: 5px"
                  type="primary"
                  size="mini"
                  @click="recordsWay(scope.row)"
                >
                  发货记录
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.pageSize"
          @pagination="getListWay"
        />
      </el-row>
    </div>

    <!-- 查看备注弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="remarkDialog"
      width="700px"
    >
      <div style="position: relative" v-loading="remarkLoading">
        <div style="text-align: left; margin-bottom: 10px">
          <el-button
            @click="setRemarkDialog = true"
            icon="el-icon-circle-plus-outline"
            type="primary"
            size="mini"
            >添加备注</el-button
          >
        </div>
        <el-descriptions
          v-for="(item, index) in remarkList"
          :key="index"
          :column="1"
          border
          style="margin-top: 10px"
        >
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 添加时间 </template>
            {{ item.created_at }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 备注 </template>
            {{ item.remark }}
          </el-descriptions-item>
        </el-descriptions>
        <el-empty
          v-if="remarkList.length == 0"
          description="当前订单没有添加备注"
        ></el-empty>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="remarkDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加备注弹框 -->
    <el-dialog
      title="添加备注"
      :close-on-click-modal="false"
      :visible.sync="setRemarkDialog"
      width="700px"
      @close="
        () => {
          remarkForm.remark = '';
        }
      "
    >
      <el-row style="position: relative" v-loading="setRemarkLoading">
        <el-form label-width="80px">
          <el-col :span="22">
            <el-form-item label="备注" :rules="[{ required: true }]">
              <el-input
                type="textarea"
                placeholder="请输入要添加的备注"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="remarkForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="setRemarkLoading"
          @click="setRemarkSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改收货地址弹框 -->
    <el-dialog
      title="修改收货地址"
      :close-on-click-modal="false"
      :visible.sync="addressDialog"
      width="800px"
      @close="
        () => {
          remarkForm.remark = '';
        }
      "
    >
      <el-row
        :gutter="20"
        style="position: relative"
        v-loading="addressLoading"
      >
        <el-form
          label-width="120px"
          :rules="addressRules"
          ref="addressForm"
          :model="addressForm"
        >
          <el-col :span="11">
            <el-form-item label="收货人姓名" prop="recipient">
              <el-input
                type="text"
                placeholder="请输入收货人姓名"
                maxlength="10"
                show-word-limit
                v-model.trim="addressForm.recipient"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人手机号" prop="phone_number">
              <el-input
                type="text"
                placeholder="请输入收货人手机号"
                maxlength="11"
                show-word-limit
                v-model.trim="addressForm.phone_number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人省份" prop="province_name">
              <el-select
                @change="provinceWay"
                v-model="addressForm.province_name"
                placeholder="请输入收货人省份"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人城市" prop="city_name">
              <el-select
                @change="cityWay"
                v-model="addressForm.city_name"
                placeholder="请输入收货人城市"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人区/县" prop="district_name">
              <el-select
                v-model="addressForm.district_name"
                placeholder="请输入收货人城市"
              >
                <el-option
                  v-for="item in districtList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="收货人详细地址" prop="address_details">
              <el-input
                type="text"
                placeholder="请输入收货人详细地址"
                maxlength="50"
                show-word-limit
                v-model.trim="addressForm.address_details"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="addressLoading"
          @click="addressSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 取消订单备注弹框 -->
    <el-dialog
      title="取消订单原因"
      :close-on-click-modal="false"
      :visible.sync="cancelDialog"
      width="700px"
      @close="
        () => {
          cancelform.reason = '';
        }
      "
    >
      <el-row style="position: relative" v-loading="cancelLoading">
        <el-form label-width="80px">
          <el-col :span="22">
            <el-form-item label="取消原因">
              <el-input
                type="textarea"
                placeholder="请输入取消原因"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="cancelform.reason"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="cancelLoading"
          @click="serCancelSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 退款弹框弹框 -->
    <el-dialog
      title="退款信息"
      :close-on-click-modal="false"
      :visible.sync="refundDialog"
      width="700px"
      @close="
        () => {
          refundform.price_total = '';
          refundform.points_total = '';
          refundform.coupon_total = '';
          refundform.detail_id = '';
          refundform.reason = '';
        }
      "
    >
      <el-row style="position: relative" v-loading="refundLoading">
        <el-form
          label-width="80px"
          :model="refundform"
          :rules="refundRules"
          ref="refundform"
        >
          <el-col :span="11">
            <el-form-item label="现金" prop="price_total">
              <el-input
                type="Number"
                min="0"
                placeholder="请输入现金"
                show-word-limit
                v-model.trim="refundform.price_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="积分" prop="points_total">
              <el-input
                type="Number"
                min="0"
                placeholder="请输入积分"
                show-word-limit
                v-model.trim="refundform.points_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="提货券" prop="coupon_total">
              <el-input
                type="Number"
                min="0"
                placeholder="请输入提货券"
                show-word-limit
                v-model.trim="refundform.coupon_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="取消原因">
              <el-input
                type="textarea"
                placeholder="请输入取消原因"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="refundform.reason"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="refundLoading" @click="refundSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 发货记录 -->
    <el-dialog
      title="发货记录"
      :close-on-click-modal="false"
      :visible.sync="recordsDialog"
      width="800px"
    >
      <el-row style="position: relative" v-loading="recordsLoading">
        <el-descriptions
          v-for="(item, index) in recordsList"
          :key="index"
          :column="5"
          border
          style="margin-top: 10px"
        >
          <el-descriptions-item :span="1">
            <template slot="label"> 发货ID </template>
            {{ item.delivery_id }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 快递名称 </template>
            {{ item.express_name }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 快递单号 </template>
            {{ item.express_num }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 发货状态 </template>
            {{ item.status }}
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 发货时间 </template>
            {{ item.created_at }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 收货人 </template>
            {{ item.recipient }}
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 收货人电话 </template>
            {{ item.phone_number }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 收货人省市区 </template>
            {{ item.province_name }}
            {{ item.city_name }}
            {{ item.district_name }}
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 收货详细地址 </template>
            {{ item.address_details }}
          </el-descriptions-item>
        </el-descriptions>
        <el-empty
          v-if="recordsList.length == 0"
          description="暂无数据"
        ></el-empty>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="recordsLoading"
          @click="recordsDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 订单详情 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="detailsDialog"
      width="800px"
    >
      <div style="position: relative" v-loading="detailsLoading">
        <el-descriptions
          title="订单信息"
          :column="3"
          border
          style="margin-top: 10px"
        >
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 订单流水号 </template>
            {{ detailsObj.trade_no ? detailsObj.trade_no : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 购买数量 </template>
            {{ detailsObj.buy_number ? detailsObj.buy_number : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 购买单价 </template>
            {{ detailsObj.price_unit ? detailsObj.price_unit : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label" :span="3">
            <template slot="label"> 总金额 </template>
            {{ detailsObj.price_total ? detailsObj.price_total : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 积分单价 </template>
            {{ detailsObj.points_unit ? detailsObj.points_unit : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 总积分 </template>
            {{ detailsObj.points_total ? detailsObj.points_total : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 券单价 </template>
            {{ detailsObj.coupon_unit ? detailsObj.coupon_unit : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 总提货券 </template>
            {{ detailsObj.coupon_total ? detailsObj.coupon_total : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 总运费 </template>
            {{ detailsObj.freight_total ? detailsObj.freight_total : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 总优惠折扣 </template>
            {{ detailsObj.discount_total ? detailsObj.discount_total : "-" }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="商户信息"
          :column="3"
          border
          style="margin-top: 10px"
        >
          <el-descriptions-item label-class-name="my-label" :span="2">
            <template slot="label"> 供货商名称 </template>
            {{ detailsObj.supplier_name ? detailsObj.supplier_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 商户名称 </template>
            {{ detailsObj.mer_name ? detailsObj.mer_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label" :span="2">
            <template slot="label"> 商品名称 </template>
            {{ detailsObj.goods_name ? detailsObj.goods_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 商品主图 </template>
            <div
              style="
                width: 40px;
                height: 40px;
                margin: 0 auto;
                overflow: hidden;
              "
            >
              <el-image
                v-if="
                  detailsObj.goods_main_image
                    ? detailsObj.goods_main_image
                    : '-'
                "
                :src="
                  detailsObj.goods_main_image
                    ? detailsObj.goods_main_image
                    : '-'
                "
                :preview-src-list="[
                  detailsObj.goods_main_image
                    ? detailsObj.goods_main_image
                    : '-',
                ]"
              />
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 规格名称 </template>
            {{ detailsObj.product_sku ? detailsObj.product_sku : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 规格单位 </template>
            {{ detailsObj.product_unit ? detailsObj.product_unit : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 规格零售价 </template>
            {{
              detailsObj.product_retail_price
                ? detailsObj.product_retail_price
                : "-"
            }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="用户信息"
          :column="3"
          border
          style="margin-top: 10px"
        >
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 用户昵称 </template>
            {{ detailsObj.user_nickname ? detailsObj.user_nickname : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 用户头像 </template>
            <div
              style="
                width: 40px;
                height: 40px;
                margin: 0 auto;
                overflow: hidden;
              "
            >
              <el-image
                v-if="detailsObj.user_avatar ? detailsObj.user_avatar : '-'"
                :src="detailsObj.user_avatar ? detailsObj.user_avatar : '-'"
                :preview-src-list="[
                  detailsObj.user_avatar ? detailsObj.user_avatar : '-',
                ]"
              />
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 姓名 </template>
            {{ detailsObj.addr_recipient ? detailsObj.addr_recipient : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 电话 </template>
            {{
              detailsObj.addr_phone_number ? detailsObj.addr_phone_number : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 省名称 </template>
            {{
              detailsObj.addr_province_name
                ? detailsObj.addr_province_name
                : "-"
            }}
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 市名称 </template>
            {{ detailsObj.addr_city_name ? detailsObj.addr_city_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 区名称 </template>
            {{
              detailsObj.addr_district_name
                ? detailsObj.addr_district_name
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 详细地址 </template>
            {{
              detailsObj.addr_address_details
                ? detailsObj.addr_address_details
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 下单时间 </template>
            {{ detailsObj.reated_at ? detailsObj.reated_at : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 支付时间 </template>
            {{ detailsObj.pay_time ? detailsObj.pay_time : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 订单状态 </template>
            <el-tag
              v-if="(detailsObj.status ? detailsObj.status : '-') == 1"
              type="warning"
              >待支付</el-tag
            >
            <el-tag
              v-if="(detailsObj.status ? detailsObj.status : '-') == 2"
              type="info"
              >待发货</el-tag
            >
            <el-tag
              v-if="(detailsObj.status ? detailsObj.status : '-') == 3"
              type="info"
              >待收货</el-tag
            >
            <el-tag
              v-if="(detailsObj.status ? detailsObj.status : '-') == 4"
              type="warning"
              >售后</el-tag
            >
            <el-tag
              v-if="(detailsObj.status ? detailsObj.status : '-') == 5"
              type="success"
              >已收货</el-tag
            >
            <el-tag
              v-if="(detailsObj.status ? detailsObj.status : '-') == 6"
              type="success"
              >已完成</el-tag
            >
            <el-tag
              v-if="(detailsObj.status ? detailsObj.status : '-') == 9"
              type="danger"
              >已取消</el-tag
            >
            <!-- {{ detailsObj.status ? detailsObj.status : "-" }} -->
          </el-descriptions-item>
        </el-descriptions>

        <!-- <el-empty
          v-if="remarkList.length == 0"
          description="当前订单没有添加备注"
        ></el-empty> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailsDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderList,
  getRemarkList,
  setRemark,
  setAddress,
  serCancel,
  setRefundDirect,
  getDeliveryList,
} from "@/api/order/index";
import { getRegionList } from "@/api/user/index";
const tableTheadOption = {
  detail_id: {
    label: "子订单ID",
    field: "detail_id",
  },
  trade_no: {
    label: "子订单流水号",
    field: "trade_no",
  },
  buy_number: {
    label: "购买数量",
    field: "buy_number",
  },
  price_unit: {
    label: "购买单价",
    field: "price_unit",
  },
  price_total: {
    label: "总金额",
    field: "price_total",
  },
  points_unit: {
    label: "积分单价",
    field: "points_unit",
  },
  points_total: {
    label: "总积分",
    field: "points_total",
  },
  coupon_unit: {
    label: "券单价",
    field: "coupon_unit",
  },
  coupon_total: {
    label: "总提货券",
    field: "coupon_total",
  },
  freight_total: {
    label: "总运费",
    field: "freight_total",
  },
  discount_total: {
    label: "总优惠折扣",
    field: "discount_total",
  },
  pay_total: {
    label: "实际支付金额",
    field: "pay_total",
  },
  created_at: {
    label: "下单时间",
    field: "created_at",
  },
  pay_service: {
    label: "支付平台",
    field: "pay_service",
  },
  pay_time: {
    label: "支付时间",
    field: "pay_time",
  },
  supplier_id: {
    label: "供货商ID",
    field: "supplier_id",
  },
  supplier_name: {
    label: "供货商名称",
    field: "supplier_name",
  },
  mer_id: {
    label: "商户ID",
    field: "mer_id",
  },
  mer_name: {
    label: "商户名称",
    field: "mer_name",
  },
  goods_id: {
    label: "商品ID",
    field: "goods_id",
  },
  goods_name: {
    label: "商品名称",
    field: "goods_name",
  },
  goods_main_image: {
    label: "商品主图",
    field: "goods_main_image",
  },
  product_id: {
    label: "规格ID",
    field: "product_id",
  },
  product_sku: {
    label: "规格名称",
    field: "product_sku",
  },
  product_unit: {
    label: "规格单位",
    field: "product_unit",
  },
  product_retail_price: {
    label: "规格零售价",
    field: "product_retail_price",
  },
  user_nickname: {
    label: "用户昵称",
    field: "user_nickname",
  },
  user_avatar: {
    label: "用户头像",
    field: "user_avatar",
  },
  addr_recipient: {
    label: "收货人姓名",
    field: "addr_recipient",
  },
  addr_phone_number: {
    label: "收货人电话",
    field: "addr_phone_number",
  },
  addr_province_name: {
    label: "收货人省市区",
    field: "addr_province_name",
  },
  addr_address_details: {
    label: "收货人详细地址",
    field: "addr_address_details",
  },
};
const allTableThead = [
  "detail_id",
  "trade_no",
  "buy_number",
  "price_unit",
  "price_total",
  "points_unit",
  "points_total",
  "coupon_unit",
  "coupon_total",
  "freight_total",
  "discount_total",
  "pay_total",
  "created_at",
  "pay_service",
  "pay_time",
  "supplier_id",
  "supplier_name",
  "mer_id",
  "mer_name",
  "goods_id",
  "goods_name",
  "goods_main_image",
  "product_id",
  "product_sku",
  "product_unit",
  "product_retail_price",
  "user_nickname",
  "user_avatar",
  "addr_recipient",
  "addr_phone_number",
  "addr_province_name",
  "addr_address_details",
];
const defaultTableThead = [
  "created_at",
  "trade_no",
  "buy_number",
  "price_unit",
  "pay_total",
  "supplier_name",
  "goods_name",
  "goods_main_image",
  "product_sku",
  "product_retail_price",
  "user_nickname",
  "addr_recipient",
  "addr_phone_number",
  "addr_province_name",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchForm: {
        order_no: "", //根据订单号
        user_id: "", // 根据用户ID
        status: "", //订单状态：1=待付款；2=待发货；3=待收货；4=退货、售后；5=已收货；9=已取消
        phone_number: "", // 收货人电话检索
        recipient: "", // 收货人姓名检索
        goods_id: "", // 商品ID检索
        goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        mer_id: "", // 店铺/商户ID检索（0=平台自营）
        create_time_start: "", //下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", //下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", //支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", //支付截至时间（例：2023-10-02 12:20）
        pageSize: 10,
        page: 1,
      },
      // 当前搜索是否展开
      searchDisplay: false,
      create_time: [],
      pay_time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      OrderList: [],
      total: 0,
      remarkDialog: false, // 订单备注弹框控制器
      remarkLoading: false, // 订单备注弹框加载控制器
      remarkList: [], // 订单备注列表
      remarkForm: {
        detail_id: "",
        remark: "",
      },
      setRemarkDialog: false, // 订单备注弹框控制器
      setRemarkLoading: false, // 订单备注弹框加载控制器
      addressForm: {
        detail_id: "", //订单明细表ID
        recipient: "", //收货人姓名
        phone_number: "", //收货人电话
        province_name: "", //省
        city_name: "", //市
        district_name: "", //区
        address_details: "", //	详细地址
      },
      addressRules: {
        recipient: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^a-zA-Z\u4e00-\u9fa5·]/g;
              if (value === "") {
                callback(new Error("收货人名称为必填项"));
              } else {
                if (req.test(value)) {
                  callback(new Error("名称只能为中文和英文"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        phone_number: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (!req.test(value)) {
                callback(new Error("收货人手机号格式不正确"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        province_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人省份为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        city_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人城市为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        district_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人区/县为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        address_details: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人详细地址为必填项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },

      provinceList: [],
      cityList: [],
      districtList: [],
      addressFules: {},
      addressDialog: false,
      addressLoading: false,

      cancelform: {
        detail_id: "",
        reason: "",
      },
      cancelDialog: false,
      cancelLoading: false,

      refundform: {
        detail_id: "",
        price_total: "",
        points_total: "",
        coupon_total: "",
        reason: "",
      },
      refundRules: {
        price_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        points_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        coupon_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
      },
      refundDialog: false,
      refundLoading: false,

      recordsDialog: false,
      recordsLoading: false,
      recordsList: [],

      detailsLoading: false,
      detailsDialog: false,
      detailsObj: {},
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getOrderList(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.OrderList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0];
      this.searchForm.create_time_end = vla[1];
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0];
      this.searchForm.pay_time_end = vla[1];
    },
    resetting() {
      this.searchForm = {
        order_no: "", //根据订单号
        user_id: "", // 根据用户ID
        status: "", //订单状态：1=待付款；2=待发货；3=待收货；4=退货、售后；5=已收货；9=已取消
        phone_number: "", // 收货人电话检索
        recipient: "", // 收货人姓名检索
        goods_id: "", // 商品ID检索
        goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        mer_id: "", // 店铺/商户ID检索（0=平台自营）
        create_time_start: "", //下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", //下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", //支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", //支付截至时间（例：2023-10-02 12:20）
        pageSize: 10,
        page: 1,
      };
      this.create_time = [];
      this.pay_time = [];
      this.getListWay();
    },
    // 打开修改备注的弹框
    editNotesWay(row) {
      this.remarkDialog = true;
      this.remarkLoading = true;
      this.remarkForm.detail_id = row.detail_id;
      getRemarkList({ detail_id: row.detail_id }).then((res) => {
        this.remarkLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.remarkDialog = false;
          return this.$messages.error(res.msg);
        }
        this.remarkList = res.data;
      });
    },
    setRemarkSubmit() {
      if (!this.remarkForm.remark) {
        return this.$messages.error("请输入需要添加的备注");
      }
      this.setRemarkLoading = true;
      setRemark(this.remarkForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.setRemarkLoading = false;
          return this.$messages.error(res.msg);
        }
        this.$messages.success(res.msg);
        this.remarkForm.remark = "";
        this.editNotesWay(this.remarkForm);
        this.setRemarkDialog = false;
      });
    },
    drawerHandle(row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.addressDialog = true;
      this.addressLoading = true;
      getRegionList()
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.addressLoading = false;
            return this.$messages.error(res.msg);
          }
          this.provinceList = res.data;
          var arr = this.provinceList.filter((item) => {
            if (item.name == obj.addr_province_name) {
              return item.children;
            }
          });
          this.cityList = arr[0].children;
          var arr1 = this.cityList.filter((item) => {
            if (item.name == obj.addr_city_name) {
              return item.children;
            }
          });
          this.districtList = arr1[0].children;
          this.addressForm.detail_id = obj.detail_id;
          this.addressForm.recipient = obj.addr_recipient;
          this.addressForm.phone_number = obj.addr_phone_number;
          this.addressForm.province_name = obj.addr_province_name;
          this.addressForm.city_name = obj.addr_city_name;
          this.addressForm.district_name = obj.addr_district_name;
          this.addressForm.address_details = obj.addr_address_details;
          this.addressLoading = false;
        })
        .catch((res) => {
          this.addressLoading = false;
          return this.$messages.error(res.msg);
        });
    },
    provinceWay(val) {
      this.addressForm.city_name = "";
      this.addressForm.district_name = "";
      this.provinceList.forEach((item) => {
        if (item.name == val) {
          this.cityList = item.children;
        }
      });
    },
    cityWay(val) {
      this.addressForm.district_name = "";
      this.cityList.forEach((item) => {
        if (item.name == val) {
          this.districtList = item.children;
        }
      });
    },
    // 提交修改收货地址
    addressSubmit() {
      this.$refs.addressForm.validate((valid) => {
        if (valid) {
          this.addressLoading = true;
          setAddress(this.addressForm)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.addressLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.addressLoading = false;
              this.addressDialog = false;
              this.getListWay();
              this.addressForm = {
                detail_id: "", //订单明细表ID
                recipient: "", //收货人姓名
                phone_number: "", //收货人电话
                province_name: "", //省
                city_name: "", //市
                district_name: "", //区
                address_details: "", //	详细地址
              };
            })
            .catch((res) => {
              this.addressLoading = false;
              return this.$messages.error(res.msg);
            });
        } else {
          return false;
        }
      });
    },
    cancellationOrder(row) {
      this.cancelform.detail_id = row.detail_id;
      this.cancelDialog = true;
    },
    serCancelSubmit() {
      this.cancelLoading = true;
      serCancel(this.cancelform).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.cancelLoading = false;
          return this.$messages.error(res.msg);
        }
        this.$messages.success(res.msg);
        this.cancelDialog = false;
        this.cancelform = {
          detail_id: "",
          reason: "",
        };
        this.getListWay();
      });
    },
    // 退款
    refundOrder(row) {
      console.log(row);
      this.refundform.detail_id = row.detail_id;
      this.refundform.price_total = row.pay_total;
      this.refundform.points_total = row.points_total;
      this.refundform.coupon_total = row.coupon_total;
      this.refundDialog = true;
    },
    refundSubmit() {
      this.$refs.refundform.validate((valid) => {
        if (valid) {
          this.refundLoading = true;
          setRefundDirect(this.refundform).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.refundLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.refundDialog = false;
            this.refundform = {
              detail_id: "",
              price_total: "",
              points_total: "",
              coupon_total: "",
              reason: "",
            };
            this.getListWay();
          });
        } else {
          return false;
        }
      });
    },
    recordsWay(row) {
      this.recordsDialog = true;
      this.recordsLoading = true;
      getDeliveryList({ detail_id: row.detail_id }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.recordsLoading = false;
          return this.$messages.error(res.msg);
        }
        this.recordsList = res.data;
        this.recordsLoading = false;
      });
    },
    // 订单详情
    detailsHandle(row) {
      this.detailsDialog = true;
      this.detailsObj = JSON.parse(JSON.stringify(row));
      console.log(this.detailsObj);
    },
    pathWay() {
      this.$router.push("/order/platformorder/aftersales");
    },
  },
};
</script>

<style lang="scss">
.my-label {
  width: 20%;
  text-align: center !important;
}
</style>